<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-CN">
	
<head>
	<title>ES6 - 简写 — Vue.js</title>
	<meta charset="utf-8">
	<meta name="description" content="Vue.js - The Progressive JavaScript Framework">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<script src="/js/jquery-3.1.0.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="/js/prettify.js"></script>
	<script type="text/javascript" src="/js/content.js"></script>
	<link rel="stylesheet" href="/css/prettify.css">
	<link rel="icon" href="/images/logo.png" type="image/png">


	<script type="text/javascript" src="/js/vue.js"></script>



	<!-- main page styles -->
	<link rel="stylesheet" href="/css/page.css">
<style type="text/css">
	.content .linenums>ol {
		margin: 0;
		padding-left:35px;
	}
	.hljs-comment,.hljs-quote{color:#8e908c}
	.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c82829}
	.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5871f}
	.hljs-attribute{color:#eab700}
	.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#718c00}
	.hljs-section,.hljs-title{color:#4271ae}
	.hljs-keyword,.hljs-selector-tag{color:#8959a8}
	.hljs{display:block;overflow-x:auto;background:#fff;color:#4d4d4c;padding:.5em}
	.hljs-emphasis{font-style:italic}
	.hljs-strong{font-weight:700}
</style>
</head>

<body class="docs">


<div id="header">
	<a id="logo" href="https://cn.vuejs.org/">
		<img src="/images/logo.png">
		<span>Vuecli</span>
	</a>
</div>


<div id="main" class="fix-sidebar">
	<div class="sidebar">
		<div class="sidebar-inner">
			<div class="list">
			<ul class="menu-root">
	<li>
		<h3>ES6 - 简写</h3>
	</li>
	<li id="arrow_function" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Es6/arrow_function" class="sidebar-link">箭头函数</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Es6/arrow_function#基本用法">基本用法</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Es6/arrow_function#回调函数特别简洁">回调函数特别简洁</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Es6/arrow_function#箭头函数中的 this">箭头函数中的 this</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Es6/arrow_function#嵌套的 箭头函数">嵌套的 箭头函数</a>
			</li>
		<!-- 			
			<ul>
				<li>
					<a class="section-link" data-scroll="" href="/Es6/index#与自定义元素的关系">与自定义元素的关系</a>
				</li>
			</ul> -->
		</ul>
	</li>
	
	<li id="obj_simple" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Es6/obj_simple" class="sidebar-link">对象简写</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Es6/obj_simple#属性简写">属性简写</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Es6/obj_simple#方法简洁">方法简洁</a>
			</li>
		</ul>
	</li>
</ul>
			</div>
		</div>
	</div>

	
<div class="content guide with-sidebar components-guide">
<h1>对象简写</h1>	
<h2 id="属性简写">
	<a href="#属性简写" class="headerlink" title="属性简写" data-scroll="">属性简写</a>
</h2>
<code class="prettyprint linenums">var&nbsp;foo&nbsp;=&nbsp;'bar';<br/>var&nbsp;baz&nbsp;=&nbsp;{foo:&nbsp;foo};&nbsp;&nbsp;//&nbsp;冒号:&nbsp;前后字面量一样时<br/>//&nbsp;等同于<br/>var&nbsp;baz&nbsp;=&nbsp;{foo};&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;等同于:&nbsp;{foo:&nbsp;'bar'}<br/><br/>function&nbsp;f(x,&nbsp;y)&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;{x,&nbsp;y};<br/>}<br/>//&nbsp;等同于<br/>function&nbsp;f(x,&nbsp;y)&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;{x:&nbsp;x,&nbsp;y:&nbsp;y};<br/>}<br/>//&nbsp;f(1,2)&nbsp;{x:1,&nbsp;y:2}
</code>

<br><br>

<h2 id="方法简洁">
	<a href="#方法简洁" class="headerlink" title="方法简洁" data-scroll="">方法简洁</a>
</h2>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">var</span><span class="pln">&nbsp;obj&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;method</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="str">'Hello!'</span><span class="pun">;</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L4"><span class="pun">}</span></li><li class="L5"><span class="com">//&nbsp;等同于</span></li><li class="L6"><span class="kwd">var</span><span class="pln">&nbsp;obj&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;method</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="kwd">function</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L8"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="str">'Hello!'</span><span class="pun">;</span></li><li class="L9"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L0"><span class="pun">}</span></li></ol></code>

<p>实际例子:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">var</span><span class="pln">&nbsp;</span><span class="typ">Person</span><span class="pln">&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;name</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="str">'张三'</span><span class="pun">,</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;birth</span><span class="pun">;</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;birth:&nbsp;birth</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;hello&nbsp;</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;hello:&nbsp;function()&nbsp;{}</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'我的名字是:&nbsp;'</span><span class="pun">,</span><span class="pln">&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">name</span><span class="pun">);</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L6"><span class="pun">}</span></li></ol></code>

<p>用于函数返回值 非常方便:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">function</span><span class="pln">&nbsp;getPoint</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">var</span><span class="pln">&nbsp;x&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="lit">1</span><span class="pun">;</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">var</span><span class="pln">&nbsp;y&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="lit">10</span><span class="pun">;</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="pun">(</span><span class="pln">x</span><span class="pun">,</span><span class="pln">&nbsp;y</span><span class="pun">);</span></li><li class="L4"><span class="pun">}</span></li><li class="L5"><span class="pln">getPoint</span><span class="pun">()</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;{x:1,&nbsp;y:10}</span></li></ol></code>

<p>CommonJS 模块中适合:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">module</span><span class="pun">.</span><span class="pln">exports&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;getItem</span><span class="pun">,</span><span class="pln">&nbsp;&nbsp;</span><span class="com">//&nbsp;getItem:&nbsp;getItem</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;setItem</span><span class="pun">,</span><span class="pln">&nbsp;&nbsp;</span><span class="com">//&nbsp;setItem:&nbsp;setItem</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;clear&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;clear:&nbsp;clear</span></li><li class="L4"><span class="pun">}</span></li></ol></code>

<p>属性赋值器(setter) 和 取值器(getter):</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">var</span><span class="pln">&nbsp;cart&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;_wheels</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="lit">4</span><span class="pun">,</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">get</span><span class="pln">&nbsp;wheels&nbsp;</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_wheels</span><span class="pun">;</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">set</span><span class="pln">&nbsp;wheels&nbsp;</span><span class="pun">(</span><span class="pln">value</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L6"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_wheels&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;value</span><span class="pun">;</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L8"><span class="pun">}</span></li></ol></code>


</div>
		<!-- important -->

<!-- var end -->
</div>	<!-- #main -->

<script>
	
var thisAction = '<?php echo ($thisAction); ?>';

if (thisAction == 'all') {
	// sidebar全部显示
	var $link = $('.content .headerlink');
	var $slink = $('.section-link');
	
}else {
	// 仅展开 当前actionName
	$('.menu-sub').hide();
	$('#'+thisAction+'>a').addClass('current'); 
	$('#'+thisAction+'>i').addClass('sidebar-tap').html('－');
	$('#'+thisAction+' .menu-sub').show();


	$('.sidebar-menu>i').click(function(){
		if($(this).hasClass('sidebar-tap')) {
			$(this).html('＋').toggleClass('sidebar-tap');
			$(this).siblings('.menu-sub').hide();
		}else {
			$('.sidebar-menu>i').html('＋').removeClass('sidebar-tap');
			$('.sidebar-menu .menu-sub').hide();

			$(this).html('－').toggleClass('sidebar-tap');
			$(this).siblings('.menu-sub').show();
		}
	});


	let href = window.location.href;
	let start = href.indexOf('#');
	let href2 = '';
	if(start > 0) {
		href2 = href.slice(start+1);
		$('#'+thisAction+' .section-link[href="#'+href2+'"]').addClass('active');
	}else {
		$('#'+thisAction+' .menu-sub .section-link:first').addClass('active');
	}
 
	var $link = $('.content .headerlink');
	var $slink = $('#'+thisAction+' .menu-sub .section-link');
	
	$('#'+thisAction+' .section-link').click(function(){
		$slink.removeClass('active');
		$(this).addClass('active');
	});
}



// 页面滚动 .sidebar提示 start
let scrollArr = [];
$.each( $link, function() {
	let offset = $(this).offset();
	let thisId = $(this).attr('id');
	scrollArr.push(offset.top);
});


$(window).on('scroll', function(){
	let scrollTop = $(document).scrollTop();
	let nap = 110;
	let slength = scrollArr.length;
	let i=0;
	if(scrollTop < (scrollArr[0]-nap) ) {
	}else if(scrollTop >= scrollArr[slength-1]-nap) {
		i = slength-1;
	}else {
		for(i=0; i<scrollArr.length; i++) {
			if(scrollTop>=scrollArr[i]-nap && scrollTop<scrollArr[i+1]-nap) {
				break;
			}
		}
	}

	if($slink.eq(i).length > 0){
		$slink.removeClass('active');
		$slink.eq(i).addClass('active');
	}
});


</script>

    
  </body>
</html>